<template>
	<view class="recomsong">
		<view class="top">
			<navigator url="" class="navgit" open-type="switchTab">
				<strong>推荐歌单</strong> <van-icon name="arrow" />
			</navigator>
		</view>
		
		<view class="bansong">
			<van-swipe :loop="false" width="135px" :show-indicators='false'>
			  <van-swipe-item v-for="dataimgs in songs" :key="dataimgs.id">
				 <!-- <navigator :url="'../../pages/detail/detail?id=' + dataimgs.id " > -->
					<view class="imgs" @click='sendId(dataimgs.id)'>
						<van-image width="125px" height="125px" fit="contain" :src="dataimgs.picUrl"/>
			  		</view>
			  		<span class="inonplayup"><van-icon name="play" size='25px'/></span>
			  		<span class="inonplaydown"><van-icon name="play" />{{dataimgs.playCount}}</span>
			  		<p>{{dataimgs.name}}</p>	
				<!-- </navigator>	 -->
			  </van-swipe-item>
			</van-swipe>		
		</view>
	</view>
</template>

<script setup>
	import { ref , onMounted} from 'vue'
	import { reqRecomSong } from '../../api/index.js'
	import axios from 'axios'
	import {
		useStore,
	} from 'vuex'
	
	// let name = ref('lisa')
	
	const songs= ref([])
	
	let store = useStore()
	onMounted(async()=>{
		let result = await reqRecomSong()
		// console.log(result);
		songs.value = result.data.result
		// console.log(songs.value);
		
		// // 计算播放次数
		// let compcount = (num)=>{
		// 	if(num>=100000000){
		// 		return (num/10000000).toFixed(1) + '亿'
		// 	}else if(num >= 10000){
		// 		return (num/10000).toFixed(1) + '万'
		// 	}
		// }	
		
	})
	let sendId=(id)=>{
		uni.navigateTo({
			url:`../../pages/detail/detail?id=${id}`
		})
		// 派发请求   &&lists=${store.state.detail.list}
		store.dispatch('getSearMsg',id)
		// console.log(store.state.detail.list);
	}
</script>

<style lang="scss" scoped>
	.recomsong{
		width: 720px;
		margin: 20px auto;
		.top{
			padding: 20px 10px;
			.navgit{
				font-weight: 200px;
			}
			
		}
		.bansong{
			width: 100%;
			.van-swipe{
				width: 100%;
				height: 200px;
				justify-content: space-between;
				.van-swipe-item{
					width: 125px;
					height: 165px;
					position: relative;
					margin-left: 20px;
					>a{
						color: black;
					}
					.imgs{
						width: 125px;
						height: 125px;
						border-radius: 10px;
						overflow: hidden;
					}
					.inonplayup{
						width: 20px;
						color: white;
						position: absolute;
						top: 95px;
						left: 100px;
						z-index: 100;
					}
					.inonplaydown{
						color: white;
						font-size: 12px;
						position: absolute;
						top: 10px;
						left: 50px;
						z-index: 100;
					}
					>p{
						font-size: 14px;
					}
				}
			}
		}
	}
</style>